<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css">
    <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
    <style type="text/css">
        .header{width: 100%;height: 50px;line-height: 50px;background: #2e6da4;color: #ffffff;}
        .title{margin-left: 20px;font-size: 20px;}
        .userinfo{float: right;margin-right: 10px;}
        .userinfo a{color: #ffffff;}
        .menu{width: 200px;background: #333744;position:absolute;}
        .main{left: 200px;position:absolute;right: 0px;}

        .layui-collapse{border: none;}
        .layui-colla-item{border-top: none;}
        .layui-colla-title{background: #42485b;color: #ffffff;}
        .layui-colla-content{border-top: none;padding: 0px;}
    </style>
</head>
<body>
    <!--top-->
    <div class="header">
        <span class="title"><span style="font-size: 12px;">{$site.values}</span>-后台管理</span>
        <span class="userinfo">{$admin.username}【{$role.title}】<span><a href="javascript:;" onclick="logout()">退出</a></span></span>
    </div>
    <!--菜单-->
    <div class="menu" id="menu">
        <div class="layui-collapse" lay-accordion>
            {volist name="menus" id="vo"}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">{$vo.title}</h2>
                <!--<div class="layui-colla-content layui-show">展开标签-->
                <div class="layui-colla-content">
                    <?php if(isset($vo['children']) && $vo['children']){?>
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        {volist name="vo.children" id="cvo"}
                        <li class="layui-nav-item"><a href="javascript:;" onclick="menuFire(this)" src="{:url('admins/'.$cvo.controller.'/'.$cvo.method.'')}">{$cvo.title}</a></li>
                        {/volist}
                    </ul>
                    <?php }?>
                </div>
            </div>
            {/volist}

        </div>
    </div>
    <!--主操作页面-->
    <div class="main">
        <iframe src="{:url('admins/Home/welcome')}" onload="resetMainHeight(this)" style="width: 100%;height: 100%;" frameborder="0" scrolling="0"></iframe>
    </div>
    <script>
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element','layer'], function(){
            var element = layui.element;
            $ = layui.jquery;
            layer = layui.layer;
            resetMenuHeight();
        });

        // 重新设定菜单容器高度
        function resetMenuHeight(){
            var height = document.documentElement.clientHeight - 50;
            $('#menu').height(height);
        }

        // 重新设置主操作页面高度
        function resetMainHeight(obj){
            var height = parent.document.documentElement.clientHeight - 53;
            $(obj).parent('div').height(height);
        }

        // 菜单点击
        function menuFire(obj){
            // 获取url
            var src = $(obj).attr('src');
            // 设置iframe的src
            $('iframe').attr('src',src);
        }

        // 退出
        function logout() {

            layer.confirm('确定要退出吗？', {
                btn: ['退出','取消']
            }, function(){
                $.get("{:url('admins/Account/logout')}",function(res){
                    if(res.code>0){
                        layer.msg(res.msg,{'icon':2});
                    }else{
                        layer.msg(res.msg,{'icon':1});
                        setTimeout(function(){window.location.href="{:url('admins/Account/login')}";},500);
                    }
                },'json');
            });
        }
    </script>
</body>
</html>